<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" :detail="detail" :site-id="siteID"/>
    <el-row style="background:#fff;margin-bottom:32px;" :gutter="32">
      <div v-for="(item,index) in detail.housing_list" :key="index">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper" style="margin-top: 50px;">
          <pie-chart :chart-data="item.count_list" :x-name="item.count_list_name" :count="item.room_count" :name="item.name"/>
        </div>
      </el-col>
      </div>
      <!-- <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <line-chart :chart-data="countOrderWeek" :x-name="countOrderWeekXName" name="近7天订单数" color="#3888fa"/>
        </div>
      </el-col> -->
    </el-row>

    <!-- <el-row style="background:#fff;margin-bottom:32px;" :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <line-chart :chart-data="sumOrderMoneyMonth" :x-name="sumOrderMoneyMonthXName" name="近12个月营业额"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <line-chart :chart-data="countOrderMonth" :x-name="countOrderMonthXName" name="近12个月订单数" color="#3888fa"/>
        </div>
      </el-col>
    </el-row> -->

    <el-row :gutter="8">
      <template>
        <el-col
          :xs="{span: 24}"
          :sm="{span: 24}"
          :md="{span: 24}"
          :lg="{span: 24}"
          :xl="{span: 24}"
          style="padding-right:8px;margin-bottom:30px;">
          <transaction-table :list="detail.order_list"/>
        </el-col>
      </template>
      <template>
        <el-col :span="8" :xs="24" :sm="12" :md="8">
          <el-card class="box-card" shadow="hover" style="margin-bottom: 15px;">
            <div slot="header" class="clearfix">
              <el-tag>入住申请</el-tag>
            </div>
            <el-table :data="list.apply_room">
              <el-table-column
                prop="nickname"
                label="姓名"
              >
              </el-table-column>
              <el-table-column
                prop="room_type.name"
                label="房型"
              >
              </el-table-column>
              <!--              <el-table-column-->
              <!--                prop="time"-->
              <!--                label="入住时间"-->
              <!--              >-->
              <!--              </el-table-column>-->
              <el-table-column
                prop="create_time"
                label="时间"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="8" :xs="24" :sm="12" :md="8">
          <el-card class="box-card" shadow="hover" style="margin-bottom: 15px;">
            <div slot="header" class="clearfix">
              <el-tag>报修</el-tag>
            </div>
            <el-table :data="list.repair">
              <el-table-column
                prop="title"
                label="标题"
              >
              </el-table-column>
              <!--              <el-table-column-->
              <!--                prop="content"-->
              <!--                label="内容"-->
              <!--              >-->
              <!--              </el-table-column>-->
              <el-table-column
                prop="number"
                label="房号"
              >
              </el-table-column>
              <el-table-column
                prop="create_time"
                label="时间"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="8" :xs="24" :sm="12" :md="8">
          <el-card class="box-card" shadow="hover" style="margin-bottom: 15px;">
            <div slot="header" class="clearfix">
              <el-tag>测温</el-tag>
            </div>
            <el-table :data="list.temperature">
              <el-table-column
                prop="title"
                label="标题"
              >
              </el-table-column>
              <el-table-column
                prop="nickname"
                label="姓名"
              >
              </el-table-column>
              <!--              <el-table-column-->
              <!--                prop="num"-->
              <!--                label="温度"-->
              <!--              >-->
              <!--              </el-table-column>-->
              <el-table-column
                prop="create_time"
                label="时间"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </template>

    </el-row>
    <div class="copyrightStyle">
    <span style="white-space: pre-wrap;">
      {{copyright}}
    </span> </div>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import PieChart from './components/PieChart'
import TransactionTable from './components/TransactionTable'
import { dashboard } from '@/api/dashboard'
import { randomNum } from '@/utils'

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    // LineChart,
    PieChart,
    TransactionTable
  },
  data() {
    return {

      detail: {
        count_user: 0, // 住户人数
        count_room: 0, // 总房间数
        count_use_room: 0, // 入住数
        count_count_apply: 0, // 入住申请数
        housing_list: [] // 小区列表
      },
      countOrderWeek: [],
      countOrderWeekXName: [],
      sumOrderMoneyWeek: [],
      sumOrderMoneyWeekXName: [],

      countOrderMonth: [],
      countOrderMonthXName: [],
      sumOrderMoneyMonth: [],
      sumOrderMoneyMonthXName: [],
      copyright: '版权所有： 南京六朝智能科技有限公司\n苏ICP备2020053965号\nICP备案要链接https://beian.miit.gov.cn/',
      list: {
        apply_room: [],
        repair: [],
        temperature: []
      }
    }
  },
  computed: {
    siteID() {
      return this.$store.getters.userinfo.site_id
    }
  },
  created() {
    this.getDashboard()

    for (let i = 1; i <= 15; i++) {
      this.list.apply_room.push({
        nickname: '小张' + i,
        room_type: {
          name: ['一房一厅', '单间', '两房一厅'][i % 3]
        },
        time: '2022-01-01 12:00:00',
        create_time: '2022-01-01 12:00:00'
      })

      this.list.repair.push({
        title: ['水龙头坏了', '空调坏了', '洗衣机坏了', 'wifi坏了', '热水器坏了'][i % 5],
        content: '',
        number: i.toString().padStart(3, '0'),
        create_time: '2022-01-01 12:00:00'
      })

      this.list.temperature.push({
        title: '体温正常36.7°C',
        nickname: '小张' + i,
        create_time: '2022-01-01 12:00:00'
      })
    }
  },
  methods: {
    getDashboard() {
      return dashboard().then(res => {
        res.data.sum_order_money = randomNum(10000000, 99999999)
        res.data.count_order = randomNum(10000, 99999)

        for (let [key, val] of Object.entries(res.data.count_order_week_list)) {
          res.data.count_order_week_list[key] = randomNum(100, 999)
          res.data.sum_order_money_week_list[key] = randomNum(10000, 99999)
        }

        for (let [key, val] of Object.entries(res.data.count_order_month_list)) {
          res.data.count_order_month_list[key] = randomNum(10000, 30000)
          res.data.sum_order_money_month_list[key] = randomNum(1000000, 3000000)
        }

        for (let i = 1; i <= 15; i++) {
          let price = randomNum(1000, 9999)
          res.data.order_list.push({
            id: i,
            title: '租房' + i.toString().padStart(3, '0'),
            order_no: '20220101' + (new Date()).getTime() + randomNum(1000, 9999),
            price: price,
            pay_price: price,
            status: 1,
            status_desc: '已支付'
          })
        }

        this.detail = res.data
        this.countOrderWeek = Object.values(res.data.count_order_week_list)
        this.countOrderWeekXName = Object.keys(res.data.count_order_week_list)
        this.sumOrderMoneyWeek = Object.values(res.data.sum_order_money_week_list)
        this.sumOrderMoneyWeekXName = Object.keys(res.data.sum_order_money_week_list)
        console.log('sumOrderMoneyWeek', this.sumOrderMoneyWeek)
        this.countOrderMonth = Object.values(res.data.count_order_month_list)
        this.countOrderMonthXName = Object.keys(res.data.count_order_month_list)
        this.sumOrderMoneyMonth = Object.values(res.data.sum_order_money_month_list)
        this.sumOrderMoneyMonthXName = Object.keys(res.data.sum_order_money_month_list)
      })
    },
    handleSetLineChartData(type) {

    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.copyrightStyle{
  width: 100%;
  text-align: center;
  color:	#8B7E66;
  font-size: 10px;
  // white-space: pre-wrap;
}
</style>
